<template>
	<div class='blog-home auto-height'>
		<div class="search-board">
			<el-image class="full" :src="blogBg" style="position: absolute;background: #ffe508;" fit="cover">
				<div slot="placeholder" class="full" style="background: #2d4e7b">
				</div>
				<div slot="error" class="full" style="background: #2d4e7b">
				</div>
			</el-image>
			<el-input class="search-bar" v-model="searchInput" @keyup.enter.native="search" v-if="false">
				<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
			</el-input>
		</div>
		<div v-if="articles.length > 0 && !searchInfo.showing" class="fragment-box">
			<div v-loading="loading" class="articles-box">
				<article-item class='article-fragment' v-for='(item, index) in articles' :key='index' :article='item' @jumpToArticle='jumpToArticle'></article-item>
			</div>
			<div class="extend-box">
				<date-archive-panel></date-archive-panel>
			</div>
			<pagination :page='page' @pageChange="pageChange"></pagination>
		</div>
		<search-result-panel v-if="searchInfo.showing" :results="searchInfo.results" @itemClick="jumpToArticle"></search-result-panel>
		<blank-page v-loading="loading" class="blank-box" v-if="(!searchInfo.showing && articles.length < 1) || (searchInfo.showing && searchInfo.results.length < 1)"></blank-page>
	</div>
</template>

<script>
import Utils from '../../../../../utils/util';
import ArticleItem from '../../../../components/layout/ArticleItem';
import DateArchivePanel from './components/DateArchivePanel';
import Pagination from '../../../../components/layout/Pagination';
import SearchResultPanel from '../../../../components/layout/SearchResultPanel';
import BlankPage from '../../../../components/layout/BlankPage';
import {getArticle, searchArticle} from '../../../../service/postService';

export default {
	name: 'HomePage',
	components: {
		Pagination,
		ArticleItem,
		BlankPage,
		DateArchivePanel,
		SearchResultPanel
	},
	data () {
		return {
			blogBg: '',
			articles: [],
			searchInput: '',
			loading: false,
			page: {
				total: 0,
				size: 6,
				current: 1
			},
			searchInfo: {
				showing: false,
				results: []
			}
		};
	},
	created () {
		this.blogBg = Utils.getSettingCache('ImageServerUrl') + 'blog-bg.jpg';
	},
	mounted () {
		let self = this;
		let params = {
			title: '',
			content: '',
			size: self.page.size,
			start: self.page.current - 1
		};
		self.loading = true;
		getArticle(params).then(data => {
			self.articles = data.resultList.slice(0);
			self.page.total = data.total;
			self.loading = false;
		}).catch(e => {
			self.loading = false;
		});
	},
	methods: {
		jumpToArticle (info) {
			window.open('#/article/' + info);
		},
		search () {
			let self = this;
			let param = {
				keyword: self.searchInput
			};
			self.loading = true;
			self.searchInfo.showing = true;
			searchArticle(param).then(data => {
				self.searchInfo.results = data.resultList;
				self.loading = false;
			}).catch(e => {
				self.loading = false;
			});
		},
		pageChange (current) {
			let self = this;
			self.page.current = current;
			let params = {
				title: '',
				content: '',
				size: self.page.size,
				start: self.page.current - 1
			};
			self.loading = true;
			getArticle(params).then(data => {
				self.articles = data.resultList.slice(0);
				self.page.total = data.total;
				document.getElementById('content-box-id').scrollTo(0, 0);
				self.loading = false;
			}).catch(e => {
				self.loading = false;
			});
		}
	}
};
</script>


<style lang="scss">
	.blog-home {
		.search-board {
			img {
				object-position: top;
			}
			.search-bar {
				.el-input__inner {
					border-radius: 25px 0 0 25px;

					&:focus, &:hover {
						border-color: #DCDFE6;
					}
				}
				.el-input-group__append {
					border-radius: 0 25px 25px 0;
					button.el-button {}
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
.blog-home {
	overflow: hidden;
	min-height: 100%;

	.search-board {
		position: relative;
		height: 512px;
		/*background: url("../../../../assets/img/jpg/underSea.jpg") no-repeat 50% 26%;*/
		/*background-size: cover;*/
		display: flex;
		align-items: center;
		justify-content: center;

		.search-bar {
			width: 800px;
			min-width: 200px;
			padding: 0 20px;
		}
	}

	.fragment-box {
		width: 60%;
		margin: 0 auto;


		@media(min-width:900px) {

		}
		.articles-box {
			width: calc(100% - 300px);
			float: left;
		}

		.extend-box {
			width: 300px;
			float: right;
			padding-top: 10px;
			padding-left: 10px;
		}
	}
	.blank-box {
		width: 60%;
		height: 600px;
		margin: 0 auto;
	}
}
</style>
